<template>
  <div class="form-tree-select-wrap">
    <div type="表单-分类树" tip="适用于树形分类选择" class="tree-box">
      <el-popover
        ref="popoverTree"
        placement="top-start"
        title=""
        :width="treePopWidth"
        trigger="click"
        content=""
      >
        <div slot="reference" class="tree-click-box">
          <el-input
            readonly
            v-model="treeSelectTitle"
            :placeholder="'请选择' + item.label"
            clearable
          >
          </el-input>
          <!-- <el-button type="primary"> 选择分类 </el-button> -->

          <span class="remove-box" v-if="treeSelectTitle" @click.stop="clearTreeSelect()">
            <i class="el-icon-close icon-clear"></i>
          </span>
        </div>

        <div class="pop-tree">
          <el-tree
            :data="treeData"
            :props="treeProps"
            :show-checkbox="treeShowCheckbox"
            :node-key="treeNodeKey"
            :default-expand-all="defaultExpandAll"
            :expand-on-click-node="false"
            :highlight-current="true"
            @node-click="(obj, node, self) => treeNodeClick(obj, node, self, item)"
          >
          </el-tree>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "form-select",
  components: {},
  props: {
    form: {
      //下拉选配置项
      type: Object,
      default: function () {
        return {};
      },
      required: true,
    },
    item: {
      //下拉选配置项
      type: Object,
      default: function () {
        return {
          is_required: 1,
          col: "channelId",
          label: "所属分类",
          val: "",
          width: "100",
          type: "select",
          labelKey: "channelName",
          valueKey: "channelId",
          options: [],
          apiConfig: {
            url: "/app/system/newsChannel/list",
            method: "get",
            data: {
              page: 1,
              pageSize: 10,
            },
          },
        };
      },
      required: true,
    },
  },

  data() {
    return {
      treeData: [],
      treeProps: {
        label: "label",
        children: "child",
      },
      treeShowCheckbox: false,
      treeNodeKey: "value",
      defaultExpandAll: true,

      treeFlat: [],
      treePopWidth: "",
      treeSelectTitle: "",
    };
  },
  computed: {
    // ...mapState([]),
  },

  created() {
    this.setView();
  },
  mounted() {
    this.setTreePopWidth();
  },
  methods: {
    setTreePopWidth() {
      var $popBox = document.querySelector(".form-tree-select-wrap");
      this.treePopWidth = $popBox.getBoundingClientRect().width;
    },

    setView() {
      this.$api({
        url: "/app/mall/category/list",
        method: "get",
        data: {
          page: 1,
          pageNum: 100,
        },
      }).then((res) => {
        if (res.code == 200) {
          let resData = res.data;
          this.handleDigui(resData);
          console.warn("递归数据结束 resData", JSON.parse(JSON.stringify(resData)));
          this.treeData = resData;
          // this.setTreeSelectTitle();
        }
      });
    },

    // 分类节点选择
    treeNodeClick(obj, node, self) {
      console.warn("obj, item", obj);
      console.warn("其他配置项", { ...this.item });

      this.form[this.item.col] = obj.value;
      this.treeSelectTitle = obj.label;
      if (this.$route.name == "productCate") {
        this.form["level"] = obj.deep + 1;
      }

      console.warn('this.$refs["popoverTree"]', this.$refs["popoverTree"]);
      this.$refs["popoverTree"].doClose();

      this.$emit("eventCallback", {
        from: "-formTreeSelect",
        reflush: true,
      });
    },

    //
    clearTreeSelect() {
      console.warn("移除选中");
      this.form[this.item.col] = "";
      this.treeSelectTitle = "";

      this.$emit("eventCallback", {
        from: "-formTreeSelect",
        reflush: true,
      });
    },

    // 处理递归数据
    handleDigui(list, deep = 1) {
      //设置分类深度
      list.forEach((v) => {
        v.deep = deep;
        this.treeFlat.push({ ...v });
        if (v.children && v.children.length) {
          deep = deep + 1;
          this.handleDigui(v.children, deep);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.tree-box {
  position: relative;

  .remove-box {
    .flex-center();
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
    width: 30px;
    height: 30px;

    &:hover {
      .icon-clear {
        color: #f00;
      }
    }
  }
}
</style>

<style lang="less">
.pop-tree {
  // position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 32px;
  max-height: 300px;
  max-height: 400px;
  overflow-y: auto;
  // border: 1px solid #ccc;
  border-top: none;

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    border: 5px solid #bbb;
    background: #fff;
  }
  &::-webkit-scrollbar {
    width: 5px;
    height: 0px;
  }
}
</style>
